<template>
    <view class="app">
        <view class="header">
            <view class="search"> <u-search :showAction=false placeholder="搜索关键字"></u-search></view>
            <view>
                <p style="margin-left: 8px; color: blue;" @click="cancel">取消</p>
            </view>
        </view>
        <view class="content">
            <view class="one">
                <p>客户<span style="color: #666;">10个结果</span></p>
            </view>
            <view class="two" v-for="(item, index) in list" :key="index" @click="gongsi">
                <view>
                    <p>{{ item.name }}</p>
                    <p style="margin-top: 10px; color: #666;">{{ item.time }}</p>
                </view>
                <view style="color: #ccc; font-size: 30px;">
                    &gt;
                </view>
            </view>
            <view class="cha" @click="shenzhen">查看全部结果</view>
            <view class="one">
                <p>客户<span style="color: #666;">10个结果</span></p>
            </view>
            <view class="two" v-for="(item, index) in chaList" :key="index" @click="gongsi">
                <view>
                    <p>{{ item.name }}</p>
                    <p style="margin-top: 10px; color: #666;">{{ item.time }}</p>
                </view>
                <view style="color: #ccc; font-size: 30px;">
                    &gt;
                </view>
            </view>
            <view class="cha" @click="shenzhen">查看全部结果</view>
        </view>

        <view class="footer"></view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const cancel = () => {
    uni.navigateBack({
        delta: 1
    })
}

const gongsi = () => {
    uni.navigateTo({
        url: "/pages/qiao-crm/qiao-sousuo/qiaogongsi"
    })
}

const shenzhen = () => {
    uni.navigateTo({
        url: "/pages/qiao-crm/qiao-sousuo/shenzhen"
    })
}
const list = ref([
    { id: 0, name: "深圳木卫二科技有限公司", time: "2019-08-25 14:54" },
    { id: 1, name: "深圳木卫二科技有限公司", time: "2019-08-25 14:54" },
    { id: 2, name: "深圳木卫二科技有限公司", time: "2019-08-25 14:54" },
    { id: 3, name: "深圳木卫二科技有限公司", time: "2019-08-25 14:54" },
    { id: 4, name: "深圳木卫二科技有限公司", time: "2019-08-25 14:54" },
])

const chaList = ref([
    { id: 0, name: "订单标题", time: "2019-08-25 14:54" },
    { id: 1, name: "订单标题", time: "2019-08-25 14:54" },
    { id: 2, name: "订单标题", time: "2019-08-25 14:54" },
    { id: 3, name: "订单标题", time: "2019-08-25 14:54" },
    { id: 4, name: "订单标题", time: "2019-08-25 14:54" },

])
</script>

<style lang="scss">
.cha {
    padding: 20px 20px;
    border: 1px solid #ccc;
    text-align: center;
    color: blue;
}

.two {
    border: 1px solid #ccc;
    height: 60px;
    align-items: center;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
}

.one {
    height: 30px;
    line-height: 30px;
    border: 1px solid #ccc;
    margin-top: 10px;
    padding: 10px 10px;
}

.search {
    width: 280px;
}

.app {
    width: 360px;
    height: 100vh;
    margin-left: 8px;
    border: 1px solid #ccc;
}

.header {
    margin-top: 30px;
    display: flex;
    padding: 20px 20px;
    justify-content: space-between;
    height: 20px;
    position: fixed;
    background-color: #fff;
    align-items: center;
}

.content {
    margin-top: 80px;
    height: calc(100vh - 20px - 50px);
    background-color: rgb(249, 249, 249);
    ;
    overflow: hidden;
    overflow-y: scroll;

}

.footer {
    height: 50px;
}
</style>